<template>
	<div class="u-page u-page-color-other" style="padding-bottom: 0 !important;">
		<u-navbar :title="title" :custom-back="comeback" :background="background" :border-bottom="false"></u-navbar>
		<div class="u-page-color">
			<div class="aui-list-box u-pt-15 u-pl-5 u-pr-5" v-if="GoodSalesList && GoodSalesList.length>0">
				<a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index"
					@click="toGoodsDetails(item)">
					<div class="aui-list-theme-img">
						<u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
					</div>
					<div class="aui-list-theme-message">
						<div class="u-flex line-ellipsis">
							<div class="goods-title-tag" :style="'background-color: '+item.attributeColor+';'" v-if="item.productAttribute">{{item.productAttribute}}</div>
							<h3 class="aui-list-theme-title">{{item.goodsName}}</h3>
						</div>
						<div class="u-flex pt-3">
							<u-image width="25rpx" height="25rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Life/life_label_icon.png"></u-image>
							<div class="goods-label-text">销售商品获至高返现</div>
						</div>
						<div class="u-flex u-pb-5" style="justify-content: space-between;">
							<span style="color: #ea4d5e;font-weight: bold;">
								&yen;<span class="u-fz-18">{{item.foremanReward}}~&yen;{{(parseFloat(item.foremanReward?item.foremanReward:0) + parseFloat(item.consumerShareReward?item.consumerShareReward:0) + parseFloat(item.tenThousandProfit?item.tenThousandProfit:0)).toFixed(2)}}</span>
							</span>
							<span style="color: #b7b7b7;font-size: 24rpx;">
								<u-icon name="more-dot-fill"></u-icon>
							</span>
						</div>
					</div>
				</a>
			</div>
			<!-- <div class="aui-list-box u-pt-15 u-pl-5 u-pr-5" v-if="GoodSalesList && GoodSalesList.length>0">
				<a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index" @click="toGoodsDetails(item)">
					<div class="aui-list-theme-img">
						<u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
					</div>
					<div class="aui-list-theme-message">
						<h3 class="aui-list-theme-title line-ellipsis">{{item.goodsName}}</h3>
						<div class="u-fz-11" style="color: #cdb88b;font-weight: 300;">每件商品的销售报酬</div>
						<div class="u-flex u-pb-5" style="justify-content: space-between;">
							<span style="color: #ea4d5e;font-weight: bold;">
								￥<span class="u-fz-18">{{item.foremanReward}}</span>
							</span>
							<span style="color: #b7b7b7;font-size: 24rpx;">
								已售{{item.buyTotalNum<10000?item.buyTotalNum:'9999+'}}
							</span>
						</div>
					</div>
				</a>
			</div> -->
			<div class="u-text-center" style="padding-top: 20%;" v-else>
				<u-empty text="暂无商品" mode="data"></u-empty>
			</div>
			
			<!-- <div style="height: 80rpx;"></div> -->
				
			<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;" v-if="!isShare">
				<div class="u-pt-20 u-pb-40" style="width: 90%;margin: 0 auto;height: 180rpx;">
					<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route" :type="shareData.type" :style="shareData.style" :btn="shareData.btn" :shareBtnStyle="shareData.shareBtnStyle"></ShareBtn>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
    export default {
	  mixins: [shareMixins],
      data() {
        return {
			pageNum: 1,
			pageSize: 10,
			GoodSalesList: [],
			backgroundColor: 'linear-gradient(to right , rgb(244,227,233), rgb(246,230,236))',
			title: '专场活动',
			background: {
				backgroundImage: 'linear-gradient(to right , rgb(244,227,233), rgb(246,230,236))'
			},
			shareData: {
			  docUnid: '',
			  url: '',
			  route: '',
			  type: 1,
			  style: 7,
			  btn: '分享好友',
			  shareBtnStyle: 'group-marketings-share'
			},
			isShare: false//是否是从分享过来的
		};
      },
      
      onLoad(options) {
		  if(this.isNotNull(options.isShare) && options.isShare == '1'){
			  this.isShare = true
		  }
		  this.getGoodSalesList()
		  // 分享组件数据初始化
		  this.shareData.docUnid = this.guid()
		  this.shareData.url = '/pages_tabbar_contact/personal_contact/GroupMarketings?isShare=1',
		  this.shareData.route = this.getCurrentPageUrl(this)
	  },
	  
	  onShow() {
	  },
    
      mounted() {
      },
    
      onReady() {
         
      },
	  
	  onPullDownRefresh() {
	  	this.pageNum = 1
		this.getGoodSalesList()
	  	setTimeout(() => {
	  		// 停止Loading
	  		uni.stopPullDownRefresh();
	  	}, 1000)
	  },
	  
	  onReachBottom() {
	  	  this.pageNum += 1
		  this.getGoodSalesList()
	  },
    
      methods: {
		  
		  /**
		   * 获取商品销售类列表数据
		   */
		  async getGoodSalesList(){
			  let result = await this.$u.api.unifyMiniRest({
				  systemid: "meily",
				  url: "/minrest",
				  appid: 'meily',
				  wf_num: 'R_meily_BL006',
				  pageNum: this.pageNum,
				  pageSize: this.pageSize,
				  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if(result.code == 200){
				  if(this.pageNum1 != 1){
					  this.GoodSalesList = this.GoodSalesList.concat(result.data)
				  }else{
					  this.GoodSalesList = result.data
				  }
			  }
		  },
		  
		  /** 
		   * 跳转到商品详情
		   */
		  toGoodsDetails(item) {
			  this.$u.route(item.goodDetailsurl)
		  }
		  
	  },
    };
</script>

<style scoped>
	/* 尾部导航 */
	.holder{width: 100%;height: 1.65rem;}
	/* .foot-bar{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;border-top: .01rem solid #535870;background: linear-gradient(to right,#2c324d,#3f4561);} */
	.foot-bar{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;background: #FFFFFF;padding-bottom: 50rpx}
	.foot-bar ul{width: 100%;display: flex;justify-content: space-between;font-size: .2rem;color: #fff;letter-spacing: .03rem;}
	.foot-bar ul li{width: 100%;text-align: center;height: 4rem;display: flex;align-items: center;flex-direction: column;justify-content: center;}
	.foot-bar ul li i{flex-shrink: 0;display: inline-block;width: 100%;height: 2rem;margin-top: .08rem;}
	.foot-bar ul li span{padding-top: 0rem;font-size: .7rem;color: black;}
	.foot-bar ul li.middle{flex-shrink: 0;width: 3rem;height: 3rem;border-radius: 100%;background: linear-gradient(#fe5e81,#fe4475);margin-top: -1.2rem;display: flex;align-items: center;justify-content: center;}
	.foot-bar ul li.middle i{width: 1.5rem;height: 1.5rem;background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-middle.png?sign=c9c306222b055798da5d11ea88347f9f&t=1648032925) center center no-repeat;background-size:1.5rem auto;margin-top: 0;}
	.foot-bar ul li:nth-child(1) i{background: url(/static/icons/index.png) center center no-repeat;background-size:1.6rem auto;}
	.foot-bar ul li:nth-child(2) i{background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/Index/IMyMessageCenter4.png?sign=2e76a73f6c48d678711307d17db7dc8b&t=1648625557) center center no-repeat;background-size:1.3rem auto;}
	.foot-bar ul li:nth-child(4) i{background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-detail.png?sign=8485251f8c05a5a6b45f151cc455e813&t=1648032973) center center no-repeat;background-size:1.5rem auto;}
	.foot-bar ul li:nth-child(5) i{background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-more.png?sign=2aaafe82d012de453efe2edc9d99b1d3&t=1648032988) center center no-repeat;background-size:1.5rem auto;}
	.foot-bar ul li.active span{font-weight: bold;}
	/* 公告栏 */
	.news-content{margin: 20rpx;background-color: rgb(246,246,248);padding-bottom: 40rpx;padding-top: 1rpx;border-radius: 10rpx;}
	.news-content-lists {margin: 0 auto;padding-left: 30rpx;}
	.news-content-lists li {
		margin-top: 40rpx;
		/* float: left; */
		width: 100%;
		height: 14px;
		line-height: 14px;
	}
	.news-content-lists li a {display: flex;}
	.news-content-lists li a i {
		width: 5%;
		font-style: normal;
		font-size: 14px;
		/* color: #888; */
		white-space: nowrap;
	}
	.news-content-lists li a span {
		width: 90%;
		font-size: 14px;
		color: #555;
		white-space: nowrap;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.news-content-lists li a:hover span {color: #0af}
	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
	.clearfix {}
	.color-blue{color: #3B79FE;}
	/* .i-one{font-weight: bold;color: red;}
	.i-two{font-weight: bold;color: #ff9800;}
	.i-three{font-weight: bold;color: #ffc107;} */
	.foot-bar ul li:nth-child(3) i{background: url(/static/icons/personal.png) center center no-repeat;background-size:1.3rem auto;}
	
	/* 拍档 */
	.partner-box{
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
		position: relative;
		background-color: #ffffff;
	}
	
	/* 商品列表 */
	.aui-list-box {
		overflow: hidden;
		position: relative;
	}
	.aui-list-item {
		width: 47%;
		float: left;
		margin: 0 2% 2% 0;
		background: #fff;
		display: block;
		overflow: hidden;
		border-radius: 10rpx;
		background-color: #ffffff;
	}
	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}
	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}
	
	/* 两行或多行显示... */
	.line-ellipsis{
		width: 320rpx;
		white-space:nowrap;
		overflow:hidden;
		/* text-overflow:ellipsis; */
		/* autoprefixer: off */ 
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
	}
	
	/* 限制需求列表标题的长度 */
	.job-name {
	    width: 350rpx;
	    height: 50rpx;
	    text-overflow: -o-ellipsis-lastline;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	  
	.job-price {
		font-size: 40rpx;
		color: #f02323;
		width: 232rpx;
		height: 50rpx;
		text-align: -webkit-right;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: clip;
		// display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}
	
	.work-task-li {
		padding: 30rpx 20rpx;
	}
	
	/* 商品列表 */
	.aui-list-box {
		overflow: hidden;
		position: relative;
	}
	.aui-list-item {
		width: 47%;
		float: left;
		margin: 0 0 2% 2%;
		background: #fff;
		display: block;
		overflow: hidden;
		background-color: #ffffff;
		/* border-radius: 20rpx; */
	}
	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}
	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}
	.aui-list-theme-message {
		background: #ffffff;
		padding: 10rpx 10rpx;
	}
	.aui-list-theme-title {
		color: #4a4a4a;
		font-size: 30rpx;
		line-height: 38rpx;
		margin-top: 5rpx;
	}
	.aui-list-theme-message p {
		// color: #ff3b52;
		font-size: 24rpx;
		font-weight:bold;
	}
	.aui-list-theme-message span.line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}
	.aui-list-theme-message span.none-line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
	}
	.aui-list-theme-message p i {
		font-style: normal;
		font-size: 0.7rem;
		padding: 0 0.2rem;
		color: #ff3b52;
		float: right;
		width: 25px;
		height: 25px;
	}
	.aui-list-theme-message p em {
		font-style: normal;
		font-size: 0.7rem;
		color: #ff3b52;
		text-decoration: line-through;
		font-weight:normal;
	}
	
	.price-tag {
		padding: 2rpx;
		color: #f16158;
		border: 2rpx solid #ea4d5e;
		text-align: center;
		font-size: 18rpx;
		line-height: 22rpx;
	}
	
	.services-li {
		width: 95%;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 5rpx;
	}
	
	.os-job-name {
		font-size: 32rpx;
	}
	
	.os-salary {
		color: #ea4d5e;
		font-size: 32rpx;
	}
	
	.hot-tag{
		padding: 0rpx 5rpx;
		background-color: #ffa800;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}
	
	.goods-title-tag {
		padding: 0rpx 5rpx;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}
	
	.goods-label-text {
		color: #a59349;
		font-size: 22rpx;
		font-weight: 300;
		padding-left: 3rpx;
	}
	
	.pt-3 {
		padding-top: 3rpx;
	}
	
</style>
